WebP
Image format developed by Google
05 Aug 2017
View Comments
#computer
#programming
#image
#format
#webp
Introduction
Before we talk about WebP image format, let’s rewind here a bit and make clear of what “compression” means. Compression really has one main goal which is to reduce size in bytes of an image without degrading the quality/state of a thing to an unacceptable level. In the world of internet, a lot of the things are essentially being passed in and out through our network so making things into a small size plays a critical role in the world wide web side of things. At the end, smaller size means faster transfer given the same speed of the internet.
Compression methods
There are really 2 methods of any kind of compression.
- Lossy: Lossy compression means that during the compression, the method lost original info so there is no going back to its original state.
- Lossless: For Lossless compressions, it is not losing any info when compression which makes it able to get back to the original state.
If you think this compression in terms of “text”, things could be explained simpler. Say there is a text “aaabbbbccccc” now the algorithm tells us we can reduce this to “a3b4c5” as the number denotes the number of occurrences of the letter. This is an example of lossless compression since we can reverse that to its original state, “aaabbbbccccc”. However, say we reduced it to “abc” instead. Now this is an example of lossy compression because it keeps the similarities of the original text but we cannot just go back to “aaabbbbccccc”. For texts, we almost always do lossless compression because lossy compression for text makes really no sense. So in general, when we say we compressed texts. It means we applied lossless compression to the text.
What is WebP?
With enough understanding of compressions, let’s talk about WebP which is a modern image format which supports both lossy and lossless compression currently developed by Google. The most famous lossy image would be JPEG with extensions usually of .jpg or .jpeg. It is widely used in WWW because of its compression power. It can reduce sizes quite a bit depending on the quality of image meaning less network throughput. Some time ago, I actually worked on WebP images when I had to read the files as inputs to convert into another image format to be able to display on MS outlook. This is when I found out about the WebP images and how they are being used. The work is done here.
Why WebP?
In the bottom line, Google made a bold claim that WebP compressing more than those other popular and famous image formats such as JPEG without loss of image quality (Case study). This eventually leads web pages to load faster with similar quality of images. This probably isn’t necessary much for small companies but a big company like Google, image format like WebP probably can save them tons of data. According to Google, WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index. Both lossy and lossless compression supports transparency at the better rate than most of other known transparent images.
Real Actions (Examples)
Here is an example of WebP usage in real life. A video from youtube.com has the related videos on the side. When you hover your mouse over to one of them, you will see thumbnails being displayed on Chrome. However, the Firefox will not have it enabled as the browser do not support WebP so there won’t be any thumbnails displayed on the Firefox. Now you solved the mystery on why sometimes those thumbnails won’t show up!
Animated WebP
Above thumbnails could have been generated in GIF which is another famous for animated image format. However, the problem Google faced was that the file size is too big to make sure every thumbnail show up without any “lag”. With WebP which supports animation by combining frames with lossy and lossless compression, there are at least 2 significant benefits of using WebP image format compared to GIF format. First, the WebP supports 24-bit RGB color with an 8-bit alpha channel, compared to GIF’s 8-bit color and 1-bit alpha. This means the images delivered are clearer. Another benefit is that the WebP requires fewer bytes than GIF. Animated GIFs converted to lossy WebPs are 64% smaller (from 7000 randomly chosen GIFs from the web), while lossless WebPs are 19% smaller. This is especially important on mobile networks or for web deliveries. An example of: GIF (85 KB) vs WebP (4.7 KB) which is a pretty dramatic reduction of more than 10x.
Supported browser
Officially, only 2 browsers load WebP image format. Currently, most well known supported browsers are Chrome and Opera. There are extentions where you can install to make your browsers or make other image formatting software to work, but officially those are the two official browsers for now.
What about WebM?
WebM is a video file format to use in the HTML5 video tag (built for the web) which is also sponsored by Google. It is like a side-by-side project to WebP. WebP for images, WebM for videos. WebM is an open-source software project that anyone may participate in and contribute to under BSD Lisense. See here for more info on how to contribute. One interesting thing is that WebM is also supported by Mozilla Firefox 4+ and Internet Explorer 9+. WebM has internet media type of video/webm or audio/webm which means you can do something like this in HTML 5:
<video src="video.webm" controls>
</video>To see some examples of WebM, refer to WebM demo files. Your browser has to support WebM to see these demo files, of course 
.
